.boardgame-container {
  background-color: lightgray;
}

.board {
  display: table;
  border: 1px solid black;
  margin: 20px auto;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px solid black;
  height: 100px;
  width: 100px;
  cursor: pointer;
}

.circle {
  border-radius: 50%;
}

.player-indicator-container {
  display: inline-block;
  height: 20px;
  width: 20px;
}

.tic-tac-toe {

  .board {
    border-spacing: 2px;
    background-color: white;
  }

  .cell {
    vertical-align: middle;
    text-align: center;
    font-size: 40px;
  }
}

.reversi .cell {
  height: 50px;
  width: 50px;
  background-color: green;

  .circle {
    width: 50px;
    height: 50px;

    &.black {
      background-color: black;
    }

    &.white {
      background-color: white;
    }
  }
}

.jungle-chess {
  .board {
    border-collapse: true;
  }

  .cell {
    border: none;
    position: relative;
    vertical-align: middle;
    text-align: center;

    .contentImage {
      width: 90px;
      height: 90px;
      display: inline-block;
      pointer-events: none;
    }

    .power-level {
      z-index: 1;
      position: absolute;
      left: 50%;
      bottom: 5px;
      color: red;
      font-weight: bold;
      pointer-events: none;
    }

    &.selectedAnimal {
      img {
        border: 1px solid orange;
      }
      .cell-overlay {
        background-color: silver;
      }
    }

    &.attackShadow .cell-overlay {
      display: block;
      background-color: red;
    }

    &.moveShadow .cell-overlay {
      display: block;
      background-color: grey;
    }
  }

  .cell-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    left: 0px;
    top: 0px;
    background-color: grey;
    display: none;
  }

  div.top-player {
    background-color: darkblue;
  }
  div.bottom-player {
    background-color: magenta;
  }

  img.top-player {
    border: 1px solid darkblue;
  }
  img.bottom-player {
    border: 1px solid magenta;
  }
}
